<?php
    include '../h5.php';
    include_once '../aliyun/uploadVideo.php';
    include_once '../aliyun/getSts.php';
    $h5 = new h5('xq');
    $cid = rawurldecode($_GET['cid']);
    $cid = $h5->decrypt($cid,'kks');
    if(intval($cid)){
        $query = 'select content,cid,title,cover,isvip,videoid,type from courses where cid = '.intval($cid);
        $row = $h5->mysql->get_one($query);
        $cover = 'https://h5.ruiccm.com/kks/'.$row['cover'];
    }

    if($row['isvip']==0){

        if($row['type']==1){
            $upload = new uploadVideo();
            $playinfourl = $upload->get_play_info($row['videoid']);

            if($playinfourl->VideoBase->Status=='Normal'){
                $playurl = $playinfourl->PlayInfoList->PlayInfo[2]->PlayURL;
            }
        } 
        if($row['type']==2){//1
            $upload = new uploadVideo();
            $getolplayinfo = $upload->get_olplay_info($row['videoid']);
            $playurl=$getolplayinfo->Mezzanine->FileURL;
        }  

    }else{

    }
?> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title><?php echo $row['title']?></title>
     <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
    <script type="text/javascript"  charset="utf-8" src="//g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>document.getElementsByTagName("html")[0].style.fontSize=window.innerWidth/750*100+"px";</script>
    <script type="text/javascript" src="../js/jquery.js" ></script>
    <style>
        *{margin: 0; padding: 0;}
        html,body{width:100%;height: 100%;overflow:hidden;font-family: "微软雅黑";font-size:50px;margin:0;padding:0}
        p,ul,li{font-size: 16px;}
        img{width:100%;display: block;margin:0;padding:0}
        li{list-style: none;}

        .none{display: none;}

      .page{width: 100%;height: 100%; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden;}
      .wrap{width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow:auto;overflow-y:scroll;-webkit-overflow-scrolling: touch; z-index: 11;}
      .top{width: 7.5rem; height: 1.12rem; background: rgba(0,0,0,0.8); position: relative; z-index: 1;}
      .top .logo{width: 0.64rem; height: 0.64rem; position: absolute; top: 0.24rem; left: 0.3rem; z-index: 1;}
      .top .title{width: auto; height: 1.12rem; font-size: 0.28rem; color: #fff; line-height: 1.12rem; position: absolute; top: 0; left: 1.1rem; z-index: 1;}
      .top .btn1{width: 1.5rem; height: 0.56rem; position: absolute; top: 0.28rem; left: 5.7rem; z-index: 1;}
      .vWrap{width: 7.5rem; height: 4.26rem; position: relative; overflow: hidden; z-index: 1;}
      .vWrap .video{width: 7.5rem; height: 4.26rem; position: relative; z-index: 1;}
      .vWrap .vjs-tech{width: 100%; height: 100%;}
      .vWrap .vv{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
      .vWrap .aa{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
      .vWrap .audio{width: 7.5rem; height:4.26rem; position: absolute; margin-top: 0rem; border-bottom: 0.01rem solid #e0e1e2;}
      .vWrap .audio audio{width: 7.5rem; height: 4.26rem;background-size:;}
      .vWrap audio::-webkit-media-controls-enclosure{width: 7.5rem; background: white; border-radius: 0;}
      .vWrap .vTip{width: 7.5rem; height: 4.26rem; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; font-size: 0.32rem; color: #fff; text-align: center; z-index: 3;}
      .vWrap .vTip .t1{margin-top: 1.74rem}
      .vWrap .vTip .t2{margin-top: 0.15rem}
      .mid{width: 7.1rem; height: 2rem; border-bottom: 1px solid #d4d4d4; margin-left: 0.2rem; position: relative; z-index: 1;}
      .mid .btn2{width: 6.8rem; height: 0.7rem; position: absolute; top: 0.32rem; left: 0.18rem; z-index: 1}
      .mid .vName{width: 7.1rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.36rem;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top: 1.34rem; left: 0; z-index: 1}
      .bottom{width: 7.1rem; height: auto; position: relative; margin: 0.2rem; z-index: 1}
      .bottom .tt{width: 7.1rem; height: 0.4rem; text-indent: 0.3rem; position: relative; line-height: 0.4rem; font-size: 0.36rem;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
      .bottom .tt::before{content: '';width: 0.08rem; height: 0.4rem; position: absolute; top: 0; left: 0; background: #F98660;}
      .bottom .content{width: 7.1rem; position: relative; margin-top: 0.2rem;}
      .enjoy{width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; z-index: 100; display: none;}
      .enjoy .tip{width: 3.31rem; height: 3.77rem; position: absolute; top: 0.42rem; left: 3.74rem; z-index: 100;}
        .video-img{width: 100%; display: block; position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); top: 50%; left: 50%;}
        .video-img-play{position: absolute;z-index: 2;  width: 1.2rem; height: 1.2rem; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
        .video-img img,.video-img-play img{ width: 100%;}
    </style>
</head>
<body>
<div class="videoPage">
    <div class="bg"></div>
    <div class="page">
      <div class="wrap">
        <div class="top">
          <div class="logo"><img src="images/logo.png"></div>
          <div class="title">“快乐可可狮”</div>
          <div class="btn1"><img src="images/btn.png"></div>
        </div>
        <div class="vWrap">
        <?php if($row['isvip']==0):?>

          <?php if($row['type']==1):?>
          <div class="video">
              <div class="prism-player vjs-tech" id="player-con"></div>
          </div>
           <?php elseif($row['type']==2):?>
          <div class="audio">
              <audio  controls="" loop="" autoplay="autoplay"  preload="none" id="bgMusic" class="aa" style=" background:url(images/music_brackground.gif) no-repeat center center,url(<?php echo $cover?>) no-repeat top center; background-size: 7.5rem 1.1rem,7.5rem 3.18rem;">
                 <source src="<?php echo $playurl?>" type="audio/mpeg">
              </audio> 
          </div>
          <?php else:?>
              
           <?php endif;?>
        <?php else:?>
            <div class="video-img"><img src="<?php echo $cover ?>" /></div>
            <div class="video-img-play"><img src="images/play.png"></div>
          <div class="vTip">
            <div class="t1">此课程为会员课程</div>
            <div class="t2">右上角“打开APP”观看</div>
          </div>
        <?php endif;?>  
        </div>
        <div class="mid">
          <div class="btn2"><img src="images/btn1.png"></div>
          <div class="vName"><?php echo $row['title']?></div>
        </div>
        <div class="bottom">
          <div class="tt">课程简介</div>
          <div class="content"><?php echo $row['content']?></div>
        </div>
      </div>
      <div class="enjoy">
        <div class="tip"><img src="images/enjoy.png"></div>
      </div>
      </div>
    </div>
</div>
<script>
    wxData.title='<?php echo $row['title']?>';
    wxData.qtitle='<?php echo $row['title']?>';
    wxData.link=baseurl+'audio.php?cid='+'<?php echo $cid?>';
    wxData.share();

    $('.btn1').on('click',()=>{
      if(!showTips()){
        console.log(11)
          $('.enjoy').hide();
          window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
          window.setTimeout(function() {
                      window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
          }, 2000) 
      }else{
        console.log(12)
          $('.enjoy').show();
      }
     
    })
    $('.btn2').on('click',()=>{
      if(!showTips()){
          $('.enjoy').hide();
          window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
          window.setTimeout(function() {
                      window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
          }, 2000) 
      }else{
          $('.enjoy').show();
      }
    })
    $('.aa').on('ended',()=>{
      if(!showTips()){
          $('.enjoy').hide();
          window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
          window.setTimeout(function() {
                      window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
          }, 2000) 
      }else{
          $('.enjoy').show();
      }
    })
    $('.enjoy').on('click',()=>{
      $('.enjoy').hide();
    })

    function showTips(){
        if(!isWeiXin()){
            return false;
        }
        var tipsWarp = document.getElementsByClassName('enjoy')[0];
        tipsWarp.style.display = 'block';
        return true;

    }

    function isWeiXin(){
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }

</script>
<script>
<?php  if($row['isvip']==0&&$row['type']==1):?>
var player = new Aliplayer({
  "id": "player-con",
  "source": "<?php echo $playurl ?>",
  "width": "100%",
  "height": "100%",
  "autoplay": true,
  "isLive": false,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "click",
  "useH5Prism": true,
  "cover":"",
  "skinLayout": [
      {
          "name": "bigPlayButton",
          "align": "blabs",
          "x": 30,
          "y": 80
      },
      {
          "name": "H5Loading",
          "align": "cc"
      },
      {
          "name": "controlBar",
          "align": "blabs",
          "x": 0,
          "y": 0,
          "children": [
              {
                  "name": "progress",
                  "align": "blabs",
                  "x": 0,
                  "y": 44
              },
              {
                  "name": "playButton",
                  "align": "tl",
                  "x": 15,
                  "y": 12
              },
              {
                  "name": "timeDisplay",
                  "align": "tl",
                  "x": 10,
                  "y": 7
              },
              {
                  "name": "volume",
                  "align": "tr",
                  "x": 5,
                  "y": 10
              }
          ]
      }
  ]
}, function (player) {
    console.log("播放器创建了。");
    var vv = document.getElementsByTagName('video')[0];
    console.log(vv);
    vv.addEventListener('ended',function(){
      console.log('ended');
      if(!showTips()){
          $('.enjoy').hide();
          window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
      }else{
          $('.enjoy').show();
      }
    })
  }
);
<?php endif;?>
</script>
</body>
</html>